<div class="row">
  <div class="col-lg-4">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <span class="avatar avatar-xxl mr-5" style="background-image: url(<%= @chat_window.user.avatar.url %>)"></span>
          <div class="media-body">
            <h4 class="m-0"><%= @chat_window.user.nickname %></h4>
            <p class="text-muted mb-0"><%= @chat_window.user.phone %></p>
            <ul class="social-links list-inline mb-0 mt-2">
              <li class="list-inline-item">
                <a href="javascript:void(0)" title="" data-toggle="tooltip" data-original-title="Facebook"><i class="fa fa-facebook"></i></a>
              </li>
              <li class="list-inline-item">
                <a href="javascript:void(0)" title="" data-toggle="tooltip" data-original-title="Twitter"><i class="fa fa-twitter"></i></a>
              </li>
              <li class="list-inline-item">
                <a href="javascript:void(0)" title="" data-toggle="tooltip" data-original-title="1234567890"><i class="fa fa-phone"></i></a>
              </li>
              <li class="list-inline-item">
                <a href="javascript:void(0)" title="" data-toggle="tooltip" data-original-title="@skypename"><i class="fa fa-skype"></i></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-8">
    <div class="card">
      <div class="card-body o-auto" style="padding: 0;height: 15rem">
        <ul class="list-group card-list-group">
          <% @chat_window.chat_messages.each do |message| %>
          <li class="list-group-item py-5">
            <div class="media">
              <div class="media-object avatar avatar-md mr-4" style="background-image: url(<%= message.messageable.avatar.url %>)"></div>
              <div class="media-body">
                <div class="media-heading">
                  <small class="float-right text-muted"><%= formattime(message.created_at, unit: "hour") %></small>
                  <h5><%= message.messageable.nickname %></h5>
                </div>
                <div>
                  <%= message.content %>
                </div>
              </div>
            </div>
          </li>
          <% end %>
        </ul>
      </div>
      <div class="card-footer">
        <%= form_for [:shop, ChatMessage.new] do |f| %>
          <div class="input-group">
            <%= f.text_field :content, class: "form-control", placeholder: "回复" %>
            <%= f.hidden_field :chat_window_id, value: @chat_window.id %>
            <%= f.hidden_field :messageable_id, value: current_shoper.id %>
            <%= f.hidden_field :messageable_type, value: "Shoper" %>
            <div class="input-group-append">
              <button type="submit" class="btn btn-secondary">
                <i class="fe fe-send"></i>
              </button>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>